<template>
    <title-box title="电站地图">
        <div class="x-content-inner">
            <div ref="mapDom" class="map"></div>
        </div>
    </title-box>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import TitleBox from './../TitleBox/index.vue'
import { myStation } from '/@/api/Iframe/Home/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'
/* eslint-disable */
const mapDom = ref()
const center = new TMap.LatLng(37.78412, 110.307484)
let markerLayer  = null

onMounted(() => {
  markerLayer  = new TMap.Map(mapDom.value, {
      center: center,//设置地图中心点坐标
      zoom: 4.2,   //设置地图缩放级别
      pitch: 12,  //设置俯仰角
      rotation: 7    //设置地图旋转角度
    });
    myStation().then(result=>{
        if(result.code === SUCCESS_CODE) {
          const list = result.data || []
          const markers = list.map(item => {
            return {
              id: item.id,
              position: new TMap.LatLng(item.latitude, item.longitude),
            }
          })
          if(markers.length > 0){
            new TMap.MultiMarker({
              map: markerLayer,
              geometries: markers
            })
          }
        }
    })
})

/* eslint-enable */
</script>
<style lang="css" scoped>
.map {
    height: 600px;
}
</style>
